<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人设置 - 迈浪心理</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/profile.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <div class="layout">
            <!-- 侧边栏 -->
            <aside class="sidebar">
                <div class="logo">
                    <svg width="160" height="40" viewBox="0 0 160 40">
                        <path d="M20 5 C15 15, 10 25, 5 35 S25 35, 30 25 S35 15, 40 5" fill="none" stroke="#4a90e2"
                            stroke-width="2" />
                        <text x="45" y="28" font-family="Microsoft YaHei" font-size="24" fill="#fff">迈浪心理</text>
                    </svg>
                </div>
                <nav class="nav-menu">
                    <a href="index.html" class="nav-item" @click="goToPage('index')">
                        <span class="nav-icon">📊</span>
                        <span>工作台</span>
                    </a>
                    <a href="schedule.html" class="nav-item" @click="goToPage('schedule')">
                        <span class="nav-icon">📅</span>
                        <span>排班管理</span>
                    </a>
                    <a href="records.html" class="nav-item" @click="goToPage('records')">
                        <span class="nav-icon">📝</span>
                        <span>咨询记录</span>
                    </a>
                    <div class="nav-divider"></div>
                    <a href="profile.html" class="nav-item active" @click="goToPage('profile')">
                        <span class="nav-icon">⚙️</span>
                        <span>个人设置</span>
                    </a>
                </nav>
            </aside>

            <!-- 主内容区 -->
            <main class="main-content">
                <header class="top-bar">
                    <div class="welcome">
                        <h2>个人设置</h2>
                        <p>{{ currentDate }}</p>
                    </div>
                </header>

                <section class="profile-section">
                    <div class="profile-card">
                        <div class="profile-header">
                            <div class="basic-info">
                                <h3>基本信息</h3>
                                <div class="info-form">
                                    <div class="form-group">
                                        <label>姓名</label>
                                        <input type="text" v-model="profile.name">
                                    </div>
                                    <div class="form-group">
                                        <label>职称</label>
                                        <input type="text" v-model="profile.title">
                                    </div>
                                    <div class="form-group">
                                        <label>资质证书</label>
                                        <input type="text" v-model="profile.qualification">
                                    </div>
                                    <div class="form-group">
                                        <label>从业年限</label>
                                        <input type="text" v-model="profile.experience">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="profile-content">
                            <div class="section">
                                <h3>咨询领域</h3>
                                <div class="fields-section">
                                    <div class="fields-grid">
                                        <div v-for="field in availableFields" :key="field.id" class="field-item"
                                            :class="{ 'selected': isFieldSelected(field.name) }"
                                            @click="toggleField(field.name)">
                                            <h4>{{ field.name }}</h4>
                                            <p>{{ field.description }}</p>
                                        </div>
                                    </div>
                                    <div class="fields-hint">
                                        <p>* 最多可选择3个咨询领域</p>
                                        <p>* 已选择: {{ profile.fields.length }}/3</p>
                                    </div>
                                </div>
                            </div>

                            <div class="bio-section">
                                <h3>个人简介</h3>
                                <div class="bio-form">
                                    <textarea v-model="profile.bio" placeholder="请介绍您的专业背景、从业经验和心理咨询方向..."></textarea>
                                    <div class="bio-tips">
                                        <h4>建议包含以下内容：</h4>
                                        <ul>
                                            <li>您的专业资质（如心理咨询师证书等级、其他相关证书）</li>
                                            <li>从业经验和接案数量</li>
                                            <li>擅长的心理咨询领域（如婚恋情感、职场压力、情绪管理等）</li>
                                            <li>您的咨询理念和方法论（如认知行为疗法、精神分析等）</li>
                                            <li>能为来访者提供哪些帮助和期待达到的效果</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="bio-section">
                                <h3>专业特长</h3>
                                <div class="bio-form">
                                    <textarea v-model="profile.expertise"
                                        placeholder="请详细描述您擅长的咨询领域和治疗方法..."></textarea>
                                    <div class="bio-tips">
                                        <h4>建议包含以下内容：</h4>
                                        <ul>
                                            <li>擅长处理的具体问题（如抑郁、焦虑、人际关系等）</li>
                                            <li>掌握的心理治疗技术和方法</li>
                                            <li>特殊领域的专业训练经历</li>
                                            <li>相关领域的研究成果或发表的文章</li>
                                            <li>典型案例的治疗效果（注意保护来访者隐私）</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <div class="section">
                                <h3>联系方式</h3>
                                <div class="contact-form">
                                    <div class="form-group">
                                        <label>电话</label>
                                        <input type="tel" v-model="profile.phone" readonly class="input-readonly"
                                            :title="'联系电话不可修改'">
                                    </div>
                                    <div class="form-group">
                                        <label>邮箱</label>
                                        <input type="email" v-model="profile.email">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="profile-actions">
                            <button class="save-btn" @click="saveProfile" :disabled="loading">
                                {{ loading ? '保存中...' : '保存修改' }}
                            </button>
                        </div>
                    </div>
                </section>
            </main>
        </div>
    </div>
    <script src="js/profile.js"></script>
</body>

</html>